import React, { useState } from 'react'
import { Input } from 'antd'
import List from './List.tsx'

const Father: React.FC = () => {
  const [searchWord, setSearchWord] = useState<string>('')
  // const [query, setQuery] = useState<string>('')
  const query = React.useDeferredValue(searchWord)// searchWord一变，query跟着变，但是是延迟的
  const handleChange = (e: any) => {
    setSearchWord(e.target.value)
    // startTransitation(() => {
    //   setQuery(e.target.value)
    // })
  }
  return (
    <>
      <Input value={searchWord} onChange={handleChange}/>
      <List query={query}/>
    </>

  )
}
export default React.memo(Father)
